<template>
  <div class="content-guide-bar-box">
    <div class="content-guide-item logo-account-box">
      <router-link :to="{path:'/'}">
          <img class="logo-item" src="../assets/login/logo.png" alt=""/>
      </router-link>
      <account-component class="account-item"/>
    </div>
  </div>
</template>

<script>
import AccountComponent from "@/components/FunctionComponent/AccountComponent";
import {getTopicChild} from "@/api/CommonApi";

export default {
  name: "ContentGuideBar",
  components: {
    //账号
    AccountComponent,
  },
  data() {
    return {
      // 导航栏列表
      guides: [],
      //栏目code
    }
  },
  computed: {
    curItem() {
      const path = '/' + this.$route.query.f
      const t = {}
      const list = [...this.guides]
      for (let i = 0; i < list.length; i++) {
        // 判断当前所在的栏目
        if (list[i].path === path) {
          return list[i]
        }
      }
      return t
    },
    title() {
      return localStorage.getItem('curTitle')
    },
    faPath() {
      return '/' + this.$route.query.f;
    }
  },
  mounted() {
    this.loadMainGuiderData('cd')
  },
  methods: {
    loadMainGuiderData(topicCode) {
      console.log('loadMainGuiderData')
      getTopicChild(topicCode).then(res => {
        console.log(res)
        const result = res.result || []
        this.guides = result
        console.log(" this.guides = ", this.guides);
      }).catch(err => {
        console.log(err)
      })
    },
  }
}
</script>

<style lang="less" scoped>
//phone
@media only screen and (max-width:576px){
    @width: 100vw;
    @height: 60px;
    .content-guide-bar-box {
        width: @width;
        height: @height;

        .content-guide-item {
            width: @width;
            height: @height;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-account-box {
            padding: 0 30px;

            .logo-item {
                width: 200px;
                height: 35px;
            }

            .account-item {
                width: 160px;
                height: 35px;

                /deep/ .text-warn {
                    color: black;
                }
            }
        }
    }

}

//pc
@media only screen and (min-width:576px){
    @width: 100vw;
    @height: 70px;
    .content-guide-bar-box {
        width: @width;
        height: @height;

        .content-guide-item {
            width: @width;
            height: @height;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-account-box {
            padding: 0 30px;

            .logo-item {
                width: 200px;
                height: 35px;
            }

            .account-item {
                width: 160px;
                height: 35px;

                /deep/ .text-warn {
                    color: black;
                }
            }
        }
    }

}


</style>
